<!DOCTYPE html>
<!-- html基本标签 -->
<html>
  <!-- 头部：可用来引用css/js文件 -->
  <head>
    <!-- 定义标题 -->
    <title>这是演示文档</title>
    <!-- 不引用css文件直接写样式 -->
    <style>
      .div {
        border: 1px solid #ccc;
        text-align: center;
        background-color: #EEE;
      }
      .div:hover {
        background-color: #FFF;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <!-- 不引用直接使用js -->
    <script type="text/javascript">
      window.onload = function(){
        alert("文档准备完毕");
      };
    </script>
  </head>
  <body>
    <!-- margin/padding注意 -->
    <h1>H1标签</h1>
    <h2>H2标签</h2>
    <h3>H3标签</h3>
    <h4>H4标签</h4>
    <h5>H5标签</h5>
    <h6>H6标签</h6>
    <!-- 水平线 -->
    <hr />
    换行<br />标签&lt;br /&gt;
    <hr />
<pre>
这里可以不用使用
换行标签，写成什么样子出来什么样子
</pre>
    <hr />
    空格在源代码中打一堆只显示一个：像     这样。<br />
    需要多个空格时，可以使用&amp;nbsp;代替：像&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这样。
    <hr />
    <a href="javascript:;">这是超链接，点我没有用</a>
    <a href="javascript:alert('123');">点我弹出提示</a>
    <a href="http://baidu.com">百度</a>
    <a href="http://baidu.com" target="_blank">新窗口打开百度</a>
    <hr />
    <div>这是div盒子，外表看不出什么，主要用于排版(与css并用)</div>
    <div class="div">加上了css样式的div盒子，胆子小碰到我就吓白了</div>
    <hr />
    <ul>
      <li>无序列表1</li>
      <li>无序列表2</li>
      <li>无序列表3</li>
      <li>无序列表4</li>
      <li>无序列表5</li>
    </ul>
    <ol>
      <li>列表</li>
      <li>列表</li>
      <li>列表</li>
      <li>列表</li>
      <li>列表</li>
    </ol>
    <hr />
    <code>代码块，用于存放代码</code>
    <hr />
    <blockquote>
      引用块，引用的内容可以放在这里。
    </blockquote>
    <q>短的引用块</q>
    <hr />
    <button>按钮</button>
    <button onclick="alert('常常配合js使用');">按钮2</button>
    <button onclick="alert('常常配合js使用');" disabled>禁用按钮</button>
    <br />
    <input type="text" value="输入框，删除我" placeholder="这是一个输入框的提示文本" />
    <input type="password" value="" placeholder="这是一个密码输入框" />
    <input type="email" value="只读哟" readonly />
    <br />
    表单
    <form method="get" target="">
      <input type="email" value="" placeholder="这是一个邮箱输入框" />
      <button type="submit">提交</button>
      <button type="reset">重置</button>
    </form>
    <br />
    <input type="radio" name="radio">单选
    <input type="radio" name="radio">单选2
    <input type="radio" name="radio" checked>默认选择
    <br />
    <input type="checkbox" name="check" checked>默认选择
    <input type="checkbox" name="check">多选
    <input type="checkbox" name="check">多选
    <input type="checkbox" name="check">多选
    <hr />
    <font size="3" color="red">字体自定义</font><br />
    <span>看起来没什么用的标签</span><br />
    <strong>加粗</strong><br />
    <i>斜体</i>
    <p>段落</p>
  </body>
</html>
